<template>
  <div>
    <div class="main">
      <van-field
        readonly
        name="OrgName"
        class="input_text"
        required
        v-model="form.OrgName"
        label="部门"
        placeholder="请选择"
        @click-input="goDeptment"
      >
        <template #button>
          <van-icon name="cross" @click="clearOrgCode" />
        </template>
      </van-field>
      <eagle-input
        isInputText
        label="位置"
        placeholder="请输入"
        v-model="form.Name"
        required
      >
      </eagle-input>
      <eagle-input
        name="CheckFrequencyName"
        label="点检周期"
        v-model="form.CheckFrequencyName"
        required
        :islink="true"
        readonly
        @click="_chooseFrequency()"
        placeholder="请选择点检周期"
      ></eagle-input>
      <eagle-input
        isInputText
        name="CheckNames"
        v-model="form.CheckResponsibleChnName"
        label="点检负责人"
        :autosize="true"
        :islink="true"
        :rows="1"
        type="textarea"
        required
        readonly
        placeholder="请选择"
        @click="userChooseDialogShow = true"
      ></eagle-input>
      <eagle-input
        isInputText
        class="input_text"
        label="点检要求"
        placeholder="请输入"
        v-model="form.CheckReqiureDesc"
        type="textarea"
      >
      </eagle-input>
      <div class="btn_submit">
        <eagle-button block type="primary" @click="_submit">
          保存
        </eagle-button>
      </div>
    </div>

    <deptment-choose
      :show.sync="deptmentShow"
      :SelectedValue="form.OrgCode"
      @callback="_chooseDeptmentCb"
      :isMulti="false"
    >
    </deptment-choose>
    <!--人员弹框-->
    <user-choose
      :show.sync="userChooseDialogShow"
      :selectedValue="selectedValue"
      @callback="userChooseCallback"
      :isMulti="true"
      :rowIndex="rowIndex"
    >
    </user-choose>
    <!--点检周期-->
    <CheckFrequency
      v-model="showChooseFrequency"
      :data="form"
      @close="closeChooseFrequency"
    />
  </div>
</template>

<script>
import CheckFrequency from "@/views/components/plan/checkFrequencyDialog.vue";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
import userChoose from "@/views/components/user/userChooseDialog.vue";

export default {
  components: {
    DeptmentChoose,
    userChoose,
    CheckFrequency,
  },
  data() {
    return {
      userTagData: [],
      selectedValue: "",
      userChooseDialogShow: false,
      showChooseFrequency: false,
      id: this.$route.query.id,
      deptmentShow: false,
      filter: {
        id: this.$route.query.id,
      },
      form: {},
      rowIndex: "0",
    };
  },
  created() {
    if (this.id > 0) {
      this.getDetail();
    } else {
      this.initData();
    }
  },
  methods: {
    //人员选择
    userChooseCallback(userlist) {
      if (userlist) {
        const code = userlist.map((item) => {
          return item.code;
        });
        const name = userlist.map((item) => {
          return item.name;
        });
        this.form.CheckResponsibleChnName = name.join(",");
        this.form.CheckResponsibleUserName = code.join(",");
      }
      this.userChooseDialogShow = false;
    },
    //部门选择
    _chooseDeptmentCb(item) {
      this.form.OrgName = item.name;
      this.form.OrgCode = item.code;
      this.deptmentShow = false;
    },
    clearOrgCode() {
      this.form.OrgCode = "";
      this.form.OrgName = "";
    },
    goDeptment() {
      this.deptmentShow = true;
    },
    // 点检周期
    _chooseFrequency() {
      this.showChooseFrequency = true;
    },
    closeChooseFrequency(frequency) {
      if (frequency) {
        this.form.CheckFrequencyList.forEach((item) => {
          if (item.ID == frequency) {
            this.form.CheckFrequency = frequency;
            this.form.CheckFrequencyName = item.Name;
          }
        });
      }
      this.showChooseFrequency = false;
    },
    getDetail() {
      let _this = this;
      _this.$axios
        .get("/PlanEmergencyResourcePosition/GetDetail", {
          params: _this.filter,
        })
        .then((res) => {
          _this.form = res.data;
        });
    },
    //初始化实体
    initData() {
      let _this = this;
      _this.$axios
        .get("/PlanEmergencyResourcePosition/InitNewEntity", {
          params: _this.filter,
        })
        .then((res) => {
          _this.form = res.data;
        });
    },
    // 保存
    _submit() {
      if (!this.form.Name) {
        this.$toast("请输入位置");
        return;
      }
      if (!this.form.OrgName) {
        this.$toast("请选择部门");
        return;
      }
      if (!this.form.CheckFrequency) {
        this.$toast("请选择点检周期");
        return;
      }
      if (
        !this.form.CheckResponsibleChnName &&
        !this.form.CheckResponsibleUserName
      ) {
        this.$toast("请选择点检负责人");
        return;
      }
      let _this = this;
      _this.$axios
        .post("/PlanEmergencyResourcePosition/PostData", _this.form)
        .then((res) => {
          _this.$toast("保存成功");
          _this.loading = false;
          setTimeout(() => {
            _this.$router.goRefresh();
          }, 500);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
